<script>
export default{
  data(){
    return{
      num: 2,
      sty: 'blue',
      mylist: [1,2,"ok"]
    }
  },
  methods:{
    add(){
      this.num++;
    },
    toggle(){
      if(this.sty == 'red'){
        this.sty = 'blue';
      }else{
        this.sty = 'red';
      }
    },
    myclick(item){
      console.log(item+"被点击了")
    }
  }
}
</script>
<template>
  <h1>{{ num }}</h1>
  <h2 v-bind:class="sty" v-show="num%2 == 1">你好</h2>
  <h2 v-for="(item, index) in mylist" @click="myclick(item)">{{ item }}</h2>
  <button v-on:click="add()">增加</button>
  <button v-on:click="toggle()">切换</button>
</template>
<style scoped>
.red{
  color: red;
}
.blue{
  color: blue;
}
</style>
